這次要來講複雜一點點的viewModel內List的ModelBinding方法~
我們的Model長這樣~
public class Student
{
public string Name{get;set;}
public int Height{get;set;}
}
public class Class{
public string className{get;set;}
}
public class ClassViewModel
{
public Class classroom{get;set;}
public List<Student> student{get;set;}
}
一個學生資料,一個班級資料,以及一個班級+學生的ViewModel
controller長這樣~
這個範例一樣需要兩個acion,一個塞資料給view,一個接收修改後的資料
public ActionResult Index()
{
ClassViewModel Class = new ClassViewModel();
Class.student = new List<Student>(){
new Student(){Name = "野原新之助", Height = 110},
new Student(){Name = "妮妮", Height = 105}
};
Class.classroom=new Class(){className = "向日葵小班"};
return View(Class);
}
[HttpPost]
public ActionResult Index(ClassViewModel Class)
{
//這邊我們嘗試讀取修改後的第一筆學生資料~並塞入ViewBag內
var FirstPeople=Class.student.FirstOrDefault();
if(FirstPeople!=default(Student)){
ViewBag.Name=FirstPeople.Name;
ViewBag.Height = FirstPeople.Height;
}
return View(Class);
}
最重要的View長這樣
@model HelloWorldMvcApp.ClassViewModel
@using(Html.BeginForm()){
<div>
<p>
班級名稱:
@Html.EditorFor(m=>m.classroom.className)
</p>
<p>學生們</p>
<table>
<tr>
<td>姓名</td>
<td>身高</td>
</tr>
@for(int i=0;i<Model.student.Count;i++)
{
<tr>
<td>@Html.EditorFor(m=>m.student[i].Name)</td>
<td>@Html.EditorFor(m=>m.student[i].Height)</td>
</tr>
}
</table>
<p>
<input type="submit" value="送出"/>
</p>
</div>
}
@ViewBag.Name
@ViewBag.Height
重點是!我們在讀取List的時候要用for迴圈建立input
這樣他建立的input會長這樣<input class="text-box single-line" id="student_0__Name" name="student[0].Name" type="text" value="野原新之助" />
重點是name="student[i].Name"傳回controller的時候才能binding到
如果把for改寫成foreach
@foreach(var item in Model.student){
<tr>
<td>@Html.EditorFor(Modelitem=>item.Name)</td>
<td>@Html.EditorFor(Modelitem=>item.Height)</td>
</tr>
}
這樣產生的出input就會是<input class="text-box single-line" id="item_Name" name="item.Name" type="text" value="野原新之助" />
name="item.Name"這樣傳回controller的時候就會binding不到~
好的 今天的筆記就到這裡啦~
這個簡單範例的程式碼可以在這邊執行
https://dotnetfiddle.net/4hvRVq